<template>
  <div class="page">
    <!-- header区域 -->
    <z-header class="header">购物车</z-header>

    <shopcar-cells
      :cartList="cartList"
      @delcartitem="handDelCartItem"
      @changeCount="handChangeCount"
    >
    </shopcar-cells>

    <recommend class="recm-style"> </recommend>

    <van-submit-bar
      :price="$store.getters.getCountPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox
        @click="handAllChecked"
        :value="allChecked"
        checked-color="#F63515"
        >全选</van-checkbox
      >
    </van-submit-bar>

    <tabbar :active="2" />
  </div>
</template>

<script>
// 导入 自定义组件
import tabbar from "@/components/tabBar.vue";
import zHeader from "@/components/common/z-header.vue";
import shopcarCells from "./comtonents/shopcarCells.vue";
import { mapState } from "vuex";
import { deleteCartItem, cartAdd } from "@/api";
import recommend from "@/components/common/recommend.vue";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["cartList", "allChecked"]),
  },
  components: {
    tabbar,
    zHeader,
    shopcarCells,
    recommend,
  },
  created() {
    this.cartData();
  },
  methods: {
    cartData() {
      this.$store.dispatch("getCartData");
    },
    onSubmit() {
      console.log("submit");
    },

    // 全选 或 取消全选
    handAllChecked() {
      // console.log("取消全选 或 全选");
      this.$store.dispatch("changeAllChecked");
    },
    // 子组件 删除 数据 触发的方法
    handDelCartItem(item) {
      // console.log(item);
      deleteCartItem({ id: item.id }, (res) => {
        if (res.status === 0) {
          // console.log(res);
          // console.log("删除成功！");
          // 删除成功 之后 再次获取 购物车数据
          this.cartData();
        }
      });
    },
    // 购物车数据 步进器 点击了 加号减号并更后的事件
    handChangeCount(params) {
      // console.log(params);
      cartAdd(params, (res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>

.page {
  background-color: #f7f7f7;
  padding: 0;
  .van-submit-bar {
    bottom: 92px;
    background-color: #f7f7f7;
  }
}
</style>